﻿<link href="~/lib/layui/css/layui.css" rel="stylesheet" />   @* 一 ①样式 *@ @* ②layui js库 *@
<script src="~/js/js.cookie.js"></script>
<script src="~/js/moment.js"></script>
<script src="~/lib/layui/layui.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=Ayy2qg7yLpk30zrVmlWLRmmg8MwWY6pi"></script>


<style>
    h6 {
        color: forestgreen;
        font-size: 22px;
    }

    .layui-table img {
        /* max-width: 680px; */
    }

 

</style>

<h2>酒店房型首页 </h2>
<style>
    .layui-table img {
        height: 100%;
        width: 100%;
        max-width: 600px;
    }

    /*     .layui-table td {
                width: 30% !important;
            }
         */
    .mapcontainer {
        width: 360px;
        height: 360px;
    }

    .layui-form-label {
        width: 120px;
    }

    .viewvr {
        color: red
    }
</style>
<table class="layui-table">
    <tr>
        <td>
            <div class="layui-carousel" id="ID-carousel-demo-image">
                <div carousel-item id="lunbo">
                </div>
            </div>
        </td>
        <td style="text-align:left; vertical-align:top;">
            <div style="width:400px;">
                <h3 style="400px;display:block;padding:0 0 10px 0"><p id="hotelName"></p></h3>

                <b>地址</b>:<p style="color:cadetblue;font-size:18px; padding:8px 0" id="address"></p>
                <b>联系手机: <p style="color:cadetblue;font-size:18px; padding:8px 0" id="phone"></p></b>
                <b>详情介绍:</b>
                <p style="color:cadetblue;font-size:14px ;padding:8px 0" id="detail"></p>
            </div>
        </td>
        <td><div id="container" class="mapcontainer"></div></td>
    </tr>
</table>

<script>
    $(function () {   
        LoadHotelInfo();
        ShowLunbo();
        LunBotu();
        ditu();
    });

    function LoadHotelInfo() {
        //
        $.ajax({
            url: 'https://localhost:7061/api/HotelInfo/GetHotelInfoById?id=1',
            type: 'get',
            async: false,
            success: function (res) {
                $("#hotelName").html(res.name);
                $("#address").html(res.address);
                $("#phone").html(res.phone);
                $("#detail").html(res.describe);
            }
        });
    }
    function ShowLunbo() { 
    //使用Ajax 从 
    // 后端获取图片列表,
    // 然后循环追加到 id=lunbo的容器里
        $.ajax({
            url: 'https://localhost:7061/api/Product/GetProductPages?index=1&size=12',
            type:'get',
            async:false,
            success: function (res) {
                var tr = '';
                $(res.data).each(function (i,obj) { 
                    tr += `<div><img src="${obj.imgUrl}"></div> `;
                });
                $("#lunbo").html(tr);
            }
        });


    }

    function LunBotu() {

        layui.use(function () {
            var carousel = layui.carousel;
            // 渲染 - 图片轮播
            carousel.render({
                elem: '#ID-carousel-demo-image',
                width: '300px',
                height: '360px',
                interval: 2000
            });
        });
    }


    function ditu() {         
        var map = new BMapGL.Map('container');
        var point = new BMapGL.Point(116.30690, 40.04769);
        map.centerAndZoom(point, 15);
        // 创建点标记
        var marker = new BMapGL.Marker(point);
        map.addOverlay(marker);
        // 创建信息窗口
        var opts = {
            width: 200,
            height: 100,
            title: '北京八维研修学院'
        };
        var infoWindow = new BMapGL.InfoWindow('地址：北京市海淀区上地七街唐家岭路57号', opts);
        marker.addEventListener('click', function () {
            map.openInfoWindow(infoWindow, point); // 开启信息窗口
        });
    }
</script>